<template>
  <div class="home_container">
    <!-- header -->
    <div class="header">
      <div class="logo">
        <img src="../../assets/images/home/logo.png" alt="logo">
      </div>
      <div class="title">Saving</div>
      <div class="input">
        <van-cell-group inset>
          <van-field v-model="value" placeholder="" disabled />
        </van-cell-group>
      </div>
    </div>
    <div class="top_detail">
      <div class="top">
        <div class="img">
          <img src="../../assets/images/home/usdc.png" alt="usdc">
        </div>
        <div class="title">USDC</div>
      </div>
      <div class="contant">
        <div class="title">USDC Balance</div>
        <div class="number">{{ '0.0000000' }} <span>USDC</span></div>
      </div>
      <div class="bottom">
        <div class="trend">
          <img src="../../assets/images/home/trends.png" alt="trends">
        </div>
        <div>
          <span class="trends">{{ '0.0000000' }}</span>
          <span class="trends">ETH</span>
          <span class="trends">Today's Profit</span>
        </div>
      </div>
      <div class="total">
        <div>Total Revenue</div>
        <div class="number">{{ '0.0000000' }} ETH</div>
      </div>
    </div>
    <div class="list">
      <div class="top">
        <div class="title">Portfolio</div>
        <div class="all">See All</div>
      </div>
      <div class="list_info">
        <div class="item" v-for="(item, index) in list" :key="index">
          <div class="item_img">
            <img :src="item.img" alt="BTC">
          </div>
          <div>
            <div style="font-weight: 700;">{{ item.title }}</div>
            <div style="color: #b1b1b1;">{{ item.text }}</div>
          </div>
          <div class="echarts">
            <img src="../../assets/images/home/echarts.png" alt="echarts">
          </div>
          <div class="num">
            <div style="font-weight: 700;">{{ '$63199.98' }}</div>
            <div style="color: #39bbef;">{{ '+0.45%' }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="info">
      <van-swipe class="my-swipe" loop :show-indicators="false" indicator-color="white">
        <template v-for="(item, index) in infoList">
          <van-swipe-item class="info_box" v-for="(item, index) in infoList" :key="index">
            <div class="icon">
              <img :src="item.icon" alt="info1">
            </div>
            <div class="content">{{ item.content }} </div>
          </van-swipe-item>
        </template>
      </van-swipe>
    </div>
    <div class="rate">
      <div class="rate_title">
        <div class="img">
          <img src="../../assets/images/home/rate.png" alt="rate">
        </div>
        <span>Rate of Return</span>
      </div>
      <div class="rate_content" v-for="(item, index) in 6" :key="index">
        <div class="left">
          <div class="img">
            <img src="../../assets/images/home/circle.png" alt="circle">
          </div>
          <span>{{ '999-9999' }}</span>
        </div>
        <div class="right">
          <div class="img">
            <img src="../../assets/images/home/circle.png" alt="circle">
          </div>
          <span>{{ '1.56-1.64%' }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name='Home'>
import { reactive, ref, onMounted, defineEmits, defineProps, defineExpose } from 'vue'
import { useRouter, useRoute } from 'vue-router'
// 引入静态资源
import BTC from '@/assets/images/home/BTC.png'
import ETH from '@/assets/images/home/ETH.png'
import LTC from '@/assets/images/home/LTC.png'
import ATOM from '@/assets/images/home/ATOM.png'
import info1 from '@/assets/images/home/info1.png'
import info2 from '@/assets/images/home/info2.png'
import info3 from '@/assets/images/home/info3.png'

// 变量区
const router = useRouter()
const route = useRoute()
// 搜索参数
const value = ref('')
// 比率
const list = ref([
  {
    title: 'BTC/USD',
    text: 'Bitcoin',
    img: BTC
  },
  {
    title: 'ETH/USD',
    text: 'Bitcoin',
    img: BTC
  },
  {
    title: 'ATOM/USD',
    text: 'Bitcoin',
    img: BTC
  },
  {
    title: 'LTC/USD',
    text: 'Bitcoin',
    img: BTC
  },
  {
    title: 'BTC/USD',
    text: 'Bitcoin',
    img: BTC
  },
  {
    title: 'ETH/USD',
    text: 'Bitcoin',
    img: BTC
  },
  {
    title: 'ATOM/USD',
    text: 'Bitcoin',
    img: BTC
  },
  {
    title: '123',
    text: '123',
    img: BTC
  },
])
// scroll
const infoList = ref([
  {
    icon: info1,
    content: 'Rellable Security Guarantee'
  },
  {
    icon: info2,
    content: 'Stable andReliable Investment'
  },
  {
    icon: info3,
    content: 'Convenient  and Easy Operation'
  },
])


// 代码区



onMounted(() => {

})

// 将组件中的数据进行暴露出去
defineExpose({

})
</script>

<style lang="scss" scoped>
.home_container {
  .header {
    position: absolute;
    left: 35px;
    width: 90%;
    height: 98px;
    line-height: 98px;
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
    z-index: 9;

    .logo {
      width: 50px;
      height: 50px;
      margin-top: -5px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .title {
      font-size: 36px;
      font-weight: 700;
      margin-left: -200px;
      line-height: 98px;
      margin-top: -10px;
    }

    .input {
      width: 3.61333rem;
      height: 40px;
    }

    .van-cell-group--inset {
      margin: 0px;
      border-radius: 20px;
      border: 1px solid #eee;
    }
  }

  .top_detail {
    position: relative;
    width: 100%;
    height: 650px;
    background: url('../../assets/images/home/header.png') no-repeat;
    background-size: 100% 100%;


    .top {
      width: 100px;
      height: 50px;
      line-height: 50px;
      position: absolute;
      left: 80px;
      top: 140px;

      .img {
        width: 35px;
        height: 35px;
        margin-top: 30px;

        img {
          width: 100%;
          height: 100%;
          vertical-align: middle;
        }
      }

      .title {
        position: absolute;
        font-size: 25px;
        color: #fff;
        top: 35px;
        left: 45px;
      }
    }

    .contant {
      position: absolute;
      width: 100%;

      .title {
        position: absolute;
        font-size: 24px;
        color: #fff;
        left: 80px;
        top: 240px;
      }

      .number {
        position: absolute;
        font-size: 48px;
        color: #fff;
        left: 80px;
        top: 290px;
        font-weight: 700;

        span {
          font-weight: 700;
          font-size: 25px;
        }
      }
    }

    .bottom {
      display: flex;
      position: absolute;
      left: 80px;
      top: 340px;

      .trend {
        width: 35px;
        height: 35px;
        margin-top: 10px;

        img {
          width: 100%;
          height: 100%;
          vertical-align: middle;
        }
      }

      .trends {
        color: #fff;
        font-size: 20px;
        margin-left: 10px;
        font-weight: 600;
      }

      .day {
        color: #fff;
        font-size: 20px;
        font-weight: normal;
        margin-left: 10px;
      }
    }

    .total {
      display: flex;
      position: absolute;
      left: 80px;
      top: 460px;
      font-size: 23px;

      div {
        font-weight: 700;
      }

      .number {
        margin-left: 280px;
      }
    }
  }

  .list {
    padding: 0px 50px;
    margin-top: -80px;

    .top {
      display: flex;
      justify-content: space-between;

      .title {
        font-size: 0.41333rem;
        font-weight: 700;
        color: #000;
      }

      .all {
        font-size: 0.31333rem;
        color: #39bbef;
      }
    }

    .list_info {
      .item {
        display: flex;
        border-bottom: 1px solid #b1afaf;
        font-size: 25px;
        justify-content: space-between;
        padding-bottom: 20px;
        margin-top: 30px;

        .item_img {
          width: 90px;
          height: 90px;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .echarts {
          width: 240px;
          height: 58px;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .num {
          display: flex;
          flex-direction: column;
          align-items: end;
        }
      }
    }
  }

  .info {
    padding: 20px 50px;
    display: flex;
    justify-content: space-between;

    .info_box {
      width: 200px !important;
      height: 224px;
      background: #fff;
      border-radius: 15px;
      margin-right: 23px;

      .icon {
        width: 40px;
        height: 40px;
        margin-left: 20px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .content {
        margin-left: 20px;
        margin-top: 40px;
        font-weight: 700;
        font-size: 28px;
      }
    }
  }

  .rate {
    width: 86%;
    background: #fff;
    margin: auto;
    padding-bottom: 30px;
    border-radius: 20px;

    .rate_title {
      display: flex;
      margin-bottom: 30px;

      .img {
        width: 70px;
        height: 50px;

        img {
          width: 100%;
          height: 100%;
          vertical-align: middle;
        }
      }

      span {
        font-size: 25px;
        color: #000;
        font-weight: 700;
        margin-top: 20px;
      }
    }

    .rate_content {
      display: flex;
      justify-content: space-between;
      margin: 0px 10px;
      height: 85px;
      line-height: 30px;
      background: transparent;
      border-top: 1px dashed #c4dee9;
      border-bottom: 1px dashed #c4dee9;

      .left,
      .right {
        .img {
          width: 14px;
          height: 14px;

          img {
            width: 100%;
            height: 100%;
            vertical-align: sub;
          }
        }

        span {
          font-size: 26px;
          margin-left: 20px;
        }
      }
    }
  }
}
</style>